<template>
	<view>
		<view class="bg">
			<view class="display-a padding_30rpx_0">
				<view class="tabs" @click="sel(1)">
					<view :class="currTab == 1 ? 'sel-tab' : 'tab' ">待激活</view>
					<view :class="currTab == 1 ? 'sel-line' : 'line' "></view>
				</view>
				<view class="tabs" @click="sel(2)">
					<view :class="currTab == 2 ? 'sel-tab' : 'tab' ">未使用</view>
					<view :class="currTab == 2 ? 'sel-line' : 'line' "></view>
				</view>
				<view class="tabs" @click="sel(3)">
					<view :class="currTab == 3 ? 'sel-tab' : 'tab' ">已使用/奖品</view>
					<view :class="currTab == 3 ? 'sel-line' : 'line' "></view>
				</view>
				<view class="tabs" @click="sel(4)">
					<view :class="currTab == 4 ? 'sel-tab' : 'tab' ">已过期</view>
					<view :class="currTab == 4 ? 'sel-line' : 'line' "></view>
				</view>
			</view>

			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item,index) in list" :key="index">
					<view :class="currTab == 2 ? 'received' : 'unclaimed'" @click="activeCouponFn(index)">
						<view class="dott display-a">
							<view style="width: 430rpx;">
								<view class="name" :class="currTab == 2 ? 'color_FFFFFF' : 'color_A1A1A1'">
									<block v-if="item.activityType == 4">
										<block v-if="item.cardType == 1">折扣券</block>
										<block v-if="item.cardType == 2">满减券</block>
										<block v-if="item.cardType == 3">礼品券</block>
										<block v-if="item.cardType == 4">红包券</block>
									</block>
									<block v-else>{{item.hitPrize}}</block>

								</view>
								<view class="date" :class="currTab == 2 ? 'color_FFFFFF' : 'color_A1A1A1'">有效时间
									{{item.checkEndTime}}</view>
							</view>
							<block v-if="item.activityType == 2">
								<view :class="currTab == 2 ? 'type-re' : 'type'">大转盘</view>
							</block>
							<block v-if="item.activityType == 3">
								<view :class="currTab == 2 ? 'type-re' : 'type'">九宫格</view>
							</block>
							<block v-if="item.activityType == 4">
								<view :class="currTab == 2 ? 'type-re' : 'type'">
									<block v-if="item.cardType == 1">折扣券</block>
									<block v-if="item.cardType == 2">满减券</block>
									<block v-if="item.cardType == 3">礼品券</block>
									<block v-if="item.cardType == 4">红包券</block>
								</view>
							</block>
							<image v-if="currTab == 1" class="img-21" @click="getWin(item.id)" src="../../static/21.png"></image>
							<image v-if="currTab == 2" class="img-21" src="../../static/22.png"></image>
							<image v-if="currTab == 3" class="img-21" src="../../static/23.png"></image>
						</view>
					</view>
				</block>
			</mescroll-body>

			<view style="height: 2px;"></view>


			<sunui-popup ref="popinvoice">
				<template v-slot:content>
					<view class="popWriteOffCode">

						<view @click="closeWriteOff" class="colse">关闭</view>

						<view class="WriteOffTop">
							<text class="WriteOffCodeText">温馨提示</text>
							<text class="writeWriteOff">请使用员工端，首页 > 点击输入核销 > 输入下方四位数进行核销
							</text>

							<view class="WriteOffCode">{{list[listCurr].verificationCode}}</view>
						</view>
						<view class="effectTime">有效时间:{{list[listCurr].checkEndTime}}</view>

					</view>
				</template>
			</sunui-popup>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				currTab: 1,

				uid: '', 
				
				id: '', //活动ID

				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				
				releaseChannel: '', //1抖音 3快手

				list: [],
				listCurr: '',

				windowHeight: '',
			};
		},

		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 116;
				}
			});
			if (options.releaseChannel) {
				this.releaseChannel = options.releaseChannel;
			}
			if (options.id) {
				this.id = options.id;
			}
			if (options.uid) {
				this.uid = options.uid;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			}
		},

		onShow() {
			this.$at.releaseKey('getShare');
		},

		methods: {

			// 点击使用需要员工进行核销生成核销码
			activeCouponFn(index) {
				this.listCurr = index;
				if (this.currTab == 2) {
					if (!this.list[this.listCurr].verificationCode) {
						this.$sun.toast("核销码数据错误", 'none');
						return;
					}
					this.$refs.popinvoice.show({
						anim: 'center',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false
					});
				}
			},

			closeWriteOff() {
				this.$refs.popinvoice.close();
			},

			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.getWinningRecord,
					data: {
						userId: this.uid,
						status: this.currTab,
						types: 2,
						page: scroll.num,
						limit: 10
					}
				});
				if (result.code == 2000) {
					this.mescroll.endByPage(result.data.list.length, result.data.count);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},

			sel(index) {
				this.currTab = index;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			
			getWin(prId) {
				
				uni.showModal({
					title: '激活提示',
					content: '是否通过转发作品来激活奖品',
					confirmColor: '转发作品',
					success:  (res) => {
						if (res.confirm) {
							if (prId) {
								if (this.releaseChannel == 1) {
									setTimeout(() => {
										this.sendVideo(prId)
									}, 1000)
								}
								if (this.releaseChannel == 3) {
									setTimeout(() => {
										this.getForward(prId)
									}, 1000)
								}
							}else {
								this.$sun.toast('请先进行抽奖','error');
							}
						} else if (res.cancel) {
							
						}
					}
				})
			},
			
			//转发快手视频
			async getForward(winningId) {
				uni.showLoading({
					title: '转发视频中..'
				})
				const result = await this.$http.get({
					url: this.$api.videoForwarding,
					data: {
						shopId: this.id,
						uid: this.uid,
						winningId: winningId
					}
				});
				if (result.code == 2000) {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: result.msg,
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				} else {
					uni.hideLoading()
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			// 转发抖音视频
			async sendVideo(winningId) {
				uni.showLoading({
					title: '转发视频中..'
				})
				const result = await this.$http.get({
					url: this.$api.getShare,
					data: {
						uid: this.uid,
						shopId: this.id,
						winningId: winningId
					}
				});
				if (result.code == 2000) {
					uni.hideLoading()
					this.jump(result.data);
				} else {
					uni.hideLoading()
					this.$sun.toast('发布失败请重新发布','none');
				}
			},
			
			
			jump(dyShares) {
				this.$at.uniDoFunc({
					// 键名
					key: 'getShare',
					// 是否立即触发,默认触发
					// instant: true,
					success: async () => {
						//锁定
						this.$at.lockKey('getShare');
						/*
						 * video_path:视频url
						 * image_path:图片url
						 * share_to_publish ? 0 默认(跳转视频编辑页) : 1（跳转视频发行页）
						 * hashTags 转发视频 话题
						 * s_type 挂载类型 1 抖音POI（地址） 2小程序 3 没有
						 *  app_id 小程序id
						 *  app_title 小程序标题
						 *  app_url 小程序地址
						 *  poi_id POI地址
						 */
						// const hashTags = [dyShares.hashtag_list];
						const url = new URL('snssdk1128://openplatform/share');
						var query = url.searchParams;
						query.append('hashtag_list', JSON.stringify(dyShares.hashtag_list));
						query.append('client_key', dyShares.client_key);
						query.append('state', dyShares.state);
						query.append('nonce_str', dyShares.nonce_str);
						query.append('timestamp', dyShares.timestamp);
						query.append('signature', dyShares.signature);
						query.append('share_type', dyShares.share_type);
						query.append('video_path', dyShares.video_path);
						query.append('title', dyShares.tilte);
						if (dyShares.poi_id){
							query.append('poi_id', dyShares.poi_id);
						}
						// query.append("image_path", "https://sf3-cdn-tos.douyinstatic.com/obj/douyin-open-static/tiktok.open/home/d_logo.png")
						query.append('share_to_publish', dyShares.share_to_publish);
			
						if (dyShares.mountType == 2) {
							query.append(
								'micro_app_info',
								JSON.stringify({
									appId: dyShares.app_id,
									appTitle: dyShares.app_title,
									appUrl: dyShares.app_url
								})
							);
						}
						window.location.href = url;
						setTimeout(() => {
							this.$at.releaseKey('getShare');
						}, 3500);
					}
				});
			},

		}

	}
</script>

<style lang="less" scoped>
	
	.colse {
		text-align: right;
		color: red;
	}
	
	// 显示核销码
	.popWriteOffCode {
		width: 670rpx;
		height: 410rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		padding: 20rpx 40rpx 60rpx 40rpx;

		.WriteOffTop {
			display: flex;
			flex-direction: column;
			align-items: center;

			.WriteOffCodeText {
				color: #333;
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.writeWriteOff {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 18rpx;
			}

			.WriteOffCode {
				color: #000;
				font-size: 80rpx;
				margin-bottom: 20rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 30rpx;
			}
		}

		.effectTime {
			color: #999;
			text-align: center;
		}
	}

	/deep/.mescroll-empty .empty-tip {
		color: #FFFFFF;
	}

	.date {
		font-size: 26rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.img-21 {
		width: 110rpx;
		height: 110rpx;
	}

	.type-re {
		width: 52rpx;
		border-radius: 10rpx;
		background: #FEECCF;
		box-shadow: 6rpx 8rpx 4rpx 0px #FAA735;
		padding: 6rpx 12rpx;
		margin-right: 40rpx;
		color: #FFA048;
	}

	.type {
		width: 52rpx;
		border-radius: 10rpx;
		background: #D9D9D9;
		box-shadow: 6rpx 8rpx 4rpx 0px #A1A1A1;
		padding: 6rpx 12rpx;
		margin-right: 40rpx;
		color: #A1A1A1;
	}

	.dott {
		border-radius: 20rpx;
		border: 1px dashed rgba(255, 255, 255, 0.76);
		padding: 22rpx;
	}

	.received {
		padding: 8rpx;
		width: 710rpx;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx;
		background: linear-gradient(93deg, #F99723 0%, #FFE27A 100%);
	}

	.unclaimed {
		padding: 8rpx;
		width: 710rpx;
		border-radius: 20rpx;
		background: linear-gradient(93deg, #D9D9D9 0%, #F7F7F7 100%);
		margin: 0 20rpx 20rpx;
	}

	.sel-line {
		width: 28rpx;
		height: 6rpx;
		background-color: #FFFFFF;
		border-radius: 100rpx;
		margin-left: 78rpx;
	}

	.line {
		width: 28rpx;
		height: 6rpx;
	}

	.tab {
		color: #AB97FE;
		margin-bottom: 4rpx;
	}

	.sel-tab {
		color: #FFFFFF;
		margin-bottom: 4rpx;
	}

	.tabs {
		width: 186rpx;
		text-align: center;
	}

	.bg {
		width: 750rpx;
		height: 1494rpx;
		background: url('~static/26.png');
		background-repeat: no-repeat;
		background-size: contain;
	}

	page {
		background: linear-gradient(180deg, #462CD4 0%, #5129D2 100%);
	}
</style>